<!--#
layout("/layouts/platform.html"){
#-->

<style>
    .left_aside {
        width: 132px;
        height: 500px;
    }

    .left_tree {
        margin-top: 10px;
        margin-left: -5px;
    }

    .left_tree .is-current .el-tree-node__content {
        background-color: #F5F7FA;
    }

    .el-tree-node {
        padding-top: 7px;
    }

    .note {
        width: 100%;
        height: 320px;
    }
</style>

<div id="app" v-cloak>
    <el-row class="header navbar bg-white shadow">
        <div class="btn-group tool-button mt5">
            <el-date-picker
                    v-model="searchDate"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="big"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
        </div>
        <div class="btn-group tool-button mt5">
<!--            预留-->
<!--            <el-input placeholder="搜索联赛名称" v-model="pageForm.searchKeyword" @keyup.enter.native="select">-->
                <el-button slot="append" icon="el-icon-search" @click="select"></el-button>
<!--            </el-input>-->
        </div>
    </el-row>
    <el-row style="padding-top: 50px;">
        <section class="el-container">
            <aside class="el-aside left_aside">
                <!--  左侧分类数据 -->
                <el-tree
                        @node-click="categoryClick"
                        class="left_tree"
                        :data="categoryData"
                        node-key="id"
                        :props="defaultProps"
                >
                </el-tree>
            </aside>
            <!--赛事数据-->
            <main class="el-main">
                <!-- 列表  -->
                <el-row style="margin-top: 5px;">
                    <el-table
                            :data="tableData"
                            size="small"
                            header-align="center"
                            style="width: 100%"
                    >
                        <!-- 字段 -->
                        <el-table-column
                                prop="match.league"
                                label="联赛名称"
                                header-align="center"
                                :show-overflow-tooltip="true"
                                align="center">
                        </el-table-column>

                        <el-table-column label="主场"
                                         header-align="center"
                                         prop="match.homeName"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="客场"
                                         header-align="center"
                                         prop="match.awayName"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="比分"
                                         header-align="center"
                                         prop="match.score"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="分类"
                                         header-align="center"
                                         prop="match.category"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="时间"
                                         header-align="center"
                                         prop="match.datetime"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column label="状态"
                                         header-align="center"
                                         align="center"
                                         prop="match.status">

                            <template slot-scope="scope">
                                {{statusFun(scope.row.match.status)}}
                            </template>
                        </el-table-column>

                        <!-- 主播 -->
                        <el-table-column label="主播"
                                         header-align="center"
                                         prop="nickName"
                                         align="center"
                                         :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-for="user in scope.row.anchors">
                                    【{{user.nickName}}】
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作"
                                         header-align="center"
                                         align="center"
                                         :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-dropdown @command="dropdownCommand">
                                    <el-button size="mini">
                                        <i class="ti-settings"></i>
                                        <span class="ti-angle-down"></span>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="{type:'edit',userId:scope.row.userId,row:scope.row}">
                                            修改
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-row>
                <el-row class="el-pagination-container">
                    <el-pagination
                            @size-change="pageSizeChange"
                            @current-change="pageNumberChange"
                            :current-page="pageForm.pageNumber"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="pageForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageForm.totalCount">
                    </el-pagination>
                </el-row>
            </main>
        </section>
    </el-row>
    <el-dialog
            title="编辑"
            :visible.sync="editDialogVisible"
            :close-on-click-modal="false"
            width="40%">
        <el-form :model="formData" ref="editForm" size="small" label-width="80px">
            <el-form-item prop="name" label="标签">
                <el-input maxlength="100" placeholder="多个标签请以英文逗号分隔"
                          v-model="formData.match.labels"
                          auto-complete="off" tabindex="2" type="text"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doEdit">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: function () {
            return {
                editDialogVisible :false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                pageForm: {
                    code: "",
                    searchKeyword: "",
                    searchDate: "",
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0
                },
                pickerOptions: {
                    // disabledDate: function (time) {
                    //     var threeMonths = moment().add(-3, 'months').valueOf();
                    //     return time.getTime() > Date.now() || time.getTime() < threeMonths;
                    // },
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'weeks').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-3, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                categoryData: [],
                searchDate: [],
                tableData: [],
                formData: {
                    match:{
                        labels:""
                    }
                }
            }
        },
        mounted: function () {
        },
        methods: {
            statusFun: function (typeSt) {
                var textStatus = '未开始';
                if (typeSt === 'playing') {
                    textStatus = '直播中';
                } else if (typeSt === 'played') {
                    textStatus = '已结束';
                }
                return textStatus;
            },
            categoryLoad: function () {
                var self = this;
                // 分类数据请求接口
                $.post(base + "/platform/match/match/categoryList", function (data) {
                    if (data.code == 0) {
                        data.data.unshift({
                            "name":"全部",
                            "code":"",
                        })
                        self.categoryData = data.data;
                    }
                }, "json");
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                if (self.searchDate) {
                    self.pageForm.searchDate = self.searchDate.toString();
                } else {
                    self.pageForm.searchDate = "";
                }
                $.post(base + "/platform/match/match/data/", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageData();
            },
            select: function () { // 搜索框事件
                this.pageForm.code = "";// 分类数据清空
                this.doSearch();
            },
            categoryClick: function (data, node, obj) { // 点击左侧分类事件
                this.pageForm.searchKeyword = ""; // 清空搜索框数据
                this.pageForm.code = data.code;
                this.pageData();
            },
            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                $.post(base + "/platform/match/match/edit/" + command.row.match.videoId, {}, function (data) {
                    if (data.code == 0) {
                        if (self.$refs["editForm"]) {// 清空校验提示
                            self.$refs["editForm"].resetFields();
                        }
                        self.formData = data.data;// 加载后台表单数据
                        self.editDialogVisible = true;// 打开编辑窗口
                        self.titlePopu = 1;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");

            },
            doEdit: function () { // 提交新增/修改
                var self = this;
                self.$refs["editForm"].validate(function (valid) {
                    if (valid) {
                        //titlePopu=0是新增,1是修改
                        var param = {};
                        param.matchLives = JSON.stringify(self.formData)
                        $.post(base + "/platform/match/match/editDo",param, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.doSearch();
                                self.editDialogVisible = false;
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
        },
        created: function () {
            this.categoryLoad();
            this.pageData();
        },
    });
</script>
<!--#
}
#-->